<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico" th:href="@{assets/images/favicon_1.ico}" >

        <title>登录</title>

        <link href="assets/css/bootstrap.min.css" th:href="@{assets/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
        <link href="assets/css/core.css" th:href="@{assets/css/core.css}" rel="stylesheet" type="text/css">
        <link href="assets/css/icons.css" th:href="@{assets/css/icons.css}" rel="stylesheet" type="text/css">
        <link href="assets/css/components.css" th:href="@{assets/css/components.css}" rel="stylesheet" type="text/css">
        <link href="assets/css/pages.css" th:href="@{assets/css/pages.css}" rel="stylesheet" type="text/css">
        <link href="assets/css/menu.css" th:href="@{assets/css/menu.css}" rel="stylesheet" type="text/css">
        <link href="assets/css/responsive.css" th:href="@{assets/css/responsive.css}" rel="stylesheet" type="text/css">

        <script src="assets/js/modernizr.min.js" th:src="@{assets/js/modernizr.min.js}"></script>


        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        
    </head>
    <body>


        <div class="wrapper-page">
            <div class="panel panel-color panel-primary panel-pages">
                <div class="panel-heading bg-img"> 
                    <div class="bg-overlay"></div>
                    <h3 class="text-center m-t-10 text-white"> Sign In to <strong>万家乐</strong> </h3>
                </div> 


                <div class="panel-body">
                <form class="form-horizontal" id="register_form" action="index.html" th:action="@{/register}" method="post">

                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-9">
                            <input style="height: 34px" class="form-control input-lg" name="username" type="text" required minlength="3" maxlength="12" placeholder="Username">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">密 码：</label>
                        <div class="col-sm-9">
                            <input style="height: 34px" class="form-control input-lg" name="password" type="password" required minlength="3" maxlength="12" placeholder="Password" id="pwd1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-9">
                            <input style="height: 34px" class="form-control input-lg" name="password1" type="password" required minlength="3" maxlength="12" placeholder="确认密码" id="pwd2">
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label">性  别：</label>
                        <label class="radio-inline">
                            <input type="radio" name="gender"  value="1" checked> 女
                        </label>
                        <div class="col-sm-5">
                            <label class="radio-inline">
                                <input type="radio" name="gender"   value="0"> 男
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">年  龄：</label>
                        <div class="col-sm-9">
                            <input  name="age" class="control-label col-sm-12" type="number" value="18"  style="text-align: left">
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label">Email：</label>
                        <div class="col-sm-9">
                            <input style="height: 34px" onkeyup="email_validation(this)" class="form-control input-lg" name="email" type="email" required="" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" placeholder="邮箱">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">联系电话：</label>
                        <div class="col-sm-9">
                            <input style="height: 34px" class="form-control input-lg" name="telephone" type="text" pattern="^1[3,4,5,6,7,8,9]\d{9}$" required maxlength="11" placeholder="联系电话">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">职 位：</label>
                        <div class="col-sm-9">
                            <input style="height: 34px" class="form-control input-lg" name="userType" type="text" required="" value="普通用户"  disabled>
                        </div>
                    </div>


                    <div class="form-group text-center m-t-40">
                        <div class="col-xs-12">
                            <button class="btn btn-primary btn-lg w-lg waves-effect waves-light" type="submit">注册</button>  <!-- onclick="form_validate()" -->
                        </div>
                    </div>
                    <div class="form-group text-center m-t-40">
                        <div class="col-xs-12">
                            <a href="#" th:href="@{/login}">返回登录</a>
                        </div>
                    </div>

                    </form>
                </div>                                 
                
            </div>
        </div>


        
    	<script>
            var resizefunc = [];
        </script>

        <!-- Main  -->
        <script src="assets/js/jquery.min.js" th:src="@{assets/js/jquery.min.js}"></script>
        <script src="assets/js/bootstrap.min.js" th:src="@{assets/js/bootstrap.min.js}"></script>
        <script src="assets/js/detect.js" th:src="@{assets/js/detect.js}"></script>
        <script src="assets/js/fastclick.js" th:src="@{assets/js/fastclick.js}"></script>
        <script src="assets/js/jquery.slimscroll.js" th:src="@{assets/js/jquery.slimscroll.js}"></script>
        <script src="assets/js/jquery.blockUI.js" th:src="@{assets/js/jquery.blockUI.js}"></script>
        <script src="assets/js/waves.js" th:src="@{assets/js/waves.js}"></script>
        <script src="assets/js/wow.min.js" th:src="@{assets/js/wow.min.js}"></script>
        <script src="assets/js/jquery.nicescroll.js" th:src="@{assets/js/jquery.nicescroll.js}"></script>
        <script src="assets/js/jquery.scrollTo.min.js" th:src="@{assets/js/jquery.scrollTo.min.js}"></script>

        <script src="assets/js/jquery.app.js" th:src="@{assets/js/jquery.app.js}"></script>
        <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
        <script type="text/javascript">

            function email_validation(data) {
                let email = data.value
                console.log(data.value)
                $.ajax({
                    url: "/validation",
                    data: {email:email},
                    type: "GET",
                    success: function (result) {
                        console.log(result)
                    }
                })
            }
            // 表单变量
            var form = $("#register_form")
            $(document).ready(function () {

                form.bootstrapValidator({
                    message: '输入值不合法',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        password1: {
                            message: '密码不合法',
                            validators: {
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                identical:{
                                    field:'password',
                                    message:"新密码和确认密码必须一致"
                                }
                            }
                        },age: {
                            validators: {
                                notEmpty: {
                                    message: '年龄不能为空'
                                },
                                digits:{
                                    message: "只允许输入数字"
                                },
                                greaterThan:{
                                    value:18,
                                    message: "年龄不能小于18"
                                },
                                lessThan:{
                                    value:95,
                                    message: "年龄不能大于65"
                                },
                            }
                        }/*,email: {
                            validators: {
                                notEmpty: {
                                    message: '邮箱不能为空'
                                }, emailAddress:{
                                    message: '邮箱地址不正确。'
                                },threshold:6,//设置超过n个字符后才触发验证效果
                                remote:{//向服务器发送当前的input的name值，服务器返回一个json数据。例如{"valid",true}
                                    url:"/validation",
                                    message:"当前邮箱已经存在",
                                    delay:2000,//延时请求,
                                    type:"GET"
                                }
                            }
                        }*/
                    }
                });
            });

            function register_submit() {
                let bv = form.data('bootstrapValidator');
                bv.validate();
                console.log(bv.isValid())
                if (bv.isValid()) {
                    form.submit()
                }
            }
           /* function form_validate(){
                var pwd=document.getElementById("pwd1");//获取密码
                var quepas=document.getElementById("pwd2");//确认密码

                if(!quepas.equals(pwd)){

                    quepas.setCustomValidity("两次输入的密码不一致");
                    return;

                }else{
                    $("#register_form").submit()
                }
            }*/


        </script>
	</body>
</html>